<template>
  <div class="wrapper" :class="{ fullpage: isFullPage }">
    <div class="wrapper--inner">
      <!-- 全屏按钮 -->
      <div class="btn--fullpage" @click="clickFullPage"></div>

      <!-- 专家栏 -->
      <div class="expert--box">
        <div class="expert--item">
          <div class="expert--count">3</div>
          <div class="expert--name">鼠大周</div>
        </div>
        <div class="expert--item boss">
          <div class="expert--count">5</div>
          <div class="expert--name">松鼠老爹</div>
        </div>
        <div class="expert--item">
          <div class="expert--count">4</div>
          <div class="expert--name">鼠政委</div>
        </div>
      </div>

      <!-- 前3面板 -->
      <div class="top--box">
        <div class="inner">
          <div class="top--item top2">
            <div class="top--count">100灯</div>
            <div class="top--name">
              <div class="name--text">
                经营体经营体经营体经营体经营体体经营体经营体经营体经营体经营体体
              </div>
            </div>
          </div>
          <div class="top--item top1">
            <div class="top--count">100灯</div>
            <div class="top--name">
              <div class="name--text">经营体经营体经营体体经营</div>
            </div>
          </div>
          <div class="top--item top3">
            <div class="top--count">100灯</div>
            <div class="top--name">
              <div class="name--text">经营体体经营</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 侧边栏 -->
      <div class="side--box">
        <div class="cur--report">
          <div class="cur--label">
            <i class="icon--bell"></i>
            <span class="label--text">正在汇报经营体</span>
          </div>
          <div class="cur--name">坚果品类运</div>
        </div>
        <div class="report--list">
          <div class="report--fixed">
            <div class="report--item" v-for="(item, index) in fixedList">
              <div class="report--rank">
                <div class="rank--num">{{ index + 1 }}</div>
              </div>
              <div class="report--infos">
                <div class="info--name">经营体体经营</div>
                <div class="info--group">链群</div>
              </div>
              <div class="report--lights">
                <i class="icon--thumb"></i>
                <span class="lights--num">80</span>
              </div>
            </div>
          </div>
          <div class="report--scroll">
            <vue-seamless-scroll
              :data="scrollList"
              :class-option="scrollOption"
              class="seamless--warp"
            >
              <div class="report--item" v-for="(item, index) in scrollList">
                <div class="report--rank">
                  <div class="rank--num">
                    {{ index + 1 + fixedList.length }}
                  </div>
                </div>
                <div class="report--infos">
                  <div class="info--name">经营体体经营</div>
                  <div class="info--group">链群</div>
                </div>
                <div class="report--lights">
                  <i class="icon--thumb"></i>
                  <span class="lights--num">80</span>
                </div>
              </div>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>

      <!-- 龙 -->
      <div class="loong--box"></div>

      <!-- 大众爆灯 -->
      <div class="public--box">
        <public-upvote ref="publicRef"></public-upvote>
      </div>

      <!--   音效   -->
      <audio
        src="https://szss-h5.oss-cn-hangzhou.aliyuncs.com/screen_dragon/zanAudio.MP3"
        controls
        ref="musicPlayer"
        style="visibility: hidden"
      ></audio>
      <audio
        src="https://szss-h5.oss-cn-hangzhou.aliyuncs.com/screen_dragon/LongSound.mp3"
        controls
        ref="longSoundRef"
        style="visibility: hidden"
      ></audio>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import PublicUpvote from "./components/PublicUpvote.vue";
import scroll from "vue-seamless-scroll";
Vue.use(scroll);

export default {
  name: "Baodengbang",
  components: {
    PublicUpvote,
  },
  data() {
    return {
      isFullPage: false,
      fixedList: [1, 2, 3],
      scrollList: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      scrollOption: {
        "report--item": true,
        step: 0.5
      },
    };
  },
  methods: {
    init() {},
    clickFullPage() {
      this.isFullPage = !this.isFullPage;
    },
  },
  mounted() {
    this.init();
  },
};
</script>
<style scoped lang="scss">
@import "./baodengbang";
</style>
